<template>
  <div loading="loading">
    <div class="table-default" v-if="tableData">
      <el-button class="backBtn" type="primary" @click="goback">返回</el-button>
      <!-- <print></print> -->
      <div id="base" ref="base">
        <el-descriptions :column="4" border title="基本信息">
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="销售出库单">{{ tableData.fbillno }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="客户编码">{{ tableData.fcustomerid_number }}</el-descriptions-item>

          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="客户名称">{{ tableData.fcustomerid_name }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="销售组织名称">{{ tableData.fsaleorgid_name }}</el-descriptions-item>
          <!-- <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="单据状态">{{ statusFormatter[tableData.fdocumentstatus] }}</el-descriptions-item> -->
        </el-descriptions>
      </div>
      <div id="details" ref="details" >
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="销售出库单-名细" name="details" v-if="tableData">
            <el-table :data="tableData.detailscheck_all" class="mt-3" border loading="selfLoading">
              <el-table-column prop="fmaterialid" label="品号" width="130" />
              <el-table-column prop="fmaterialname" label="品名" width="250" />
              <el-table-column prop="fmaterialmodel" label="规格" width="200" />
              <el-table-column prop="fmodel" label="型号" width="150" />
              <el-table-column prop="barcode" label="箱号" width="180" />
              <el-table-column prop="quantity" label="数量" width="150" />
              <el-table-column prop="funitid_number" label="单位编码" width="150" />
              <el-table-column prop="funitid_name" label="单位名称" width="150" />
              <el-table-column prop="fstockid_number" label="仓库编码" width="150" />
              <el-table-column prop="fstockid_name" label="仓库名称" width="150" />
              <el-table-column prop="fmemo" label="备注" width="150" />
              <el-table-column prop="creator_id" label="创建者" width="150" />
              <el-table-column prop="creator_at" label="创建时间" width="150" />
              <el-table-column prop="updated_at" label="更新时间" width="150" />
            </el-table>
            <Paginate />
          </el-tab-pane>
          <el-tab-pane label="销售出库单-汇总" name="all" v-if="detailsAllList">
            <el-table :data="detailsAllList.detailscheck_all" class="mt-3" border>
              <!-- <el-table-column prop="fseq" label="行号" /> -->
              <el-table-column prop="fmaterialid" label="品号" width="120" />
              <el-table-column prop="fmaterialname" label="品名" width="300" />
              <el-table-column prop="fmaterialmodel" label="规格" width="200" />
              <el-table-column prop="fmodel" label="型号" width="150" />
              <el-table-column prop="funitid_number" label="单位编码" width="150" />
              <el-table-column prop="funitid_name" label="单位名称" width="150" />
              <el-table-column prop="fqty" label="数量" width="150" />
              <el-table-column prop="fstockid_number" label="仓库编码" width="150" />
              <el-table-column prop="fstockid_name" label="仓库名称" width="150" />
              <el-table-column prop="fmemo" label="备注" width="150" />
              <el-table-column prop="creator_id" label="创建者" width="150" />
              <el-table-column prop="creator_at" label="创建时间" width="150" />
              <el-table-column prop="updated_at" label="更新时间" width="150" />
            </el-table>
            <Paginate />
          </el-tab-pane>

        </el-tabs>
      </div>
    </div>
    <div class="table-default" v-else>
      <el-empty>
        <el-button type="primary" @click="goBack">返回</el-button>
      </el-empty>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { computed, onMounted, toRaw, ref } from 'vue'

import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import { useRouter, useRoute } from 'vue-router'
import { ArrowDownBold } from '@element-plus/icons-vue'
import http from '/admin/support/http'

const route = useRoute()
const router = useRouter()

const props = defineProps({
  isDetail: Boolean,
  sendId: Number,
})

console.log('接受父传值', props)

const api = `salesmanagement/Detailinterface/${route.query.id}`


const { data, query, search, reset, loading, toraw } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data.data)

console.log(tableData)

const isMore = ref<boolean>(false)

const activeName = ref('details')

const getMore = () => {
  console.log('获取更多')
  isMore.value = !isMore.value
}

const statusFormatter = ref({
  0: '未审核',
  1: '审核',
})

let detailsAllList = ref()
let selfLoading = ref(false)

const getdetailsAllList = () => {
  http.get(`salesmanagement/Detailinterface/${route.query.id}?all=27`).then(r => {
    selfLoading.value = true
    console.log(r.data.data.data)
    detailsAllList.value = r.data.data.data
    selfLoading.value = false
  })
}
getdetailsAllList()

// let emit = defineEmits(['custom-click'])

// 返回，切换组件
const goback = () => {
  router.push('/Salesmanagement/salesmanagement')
}

const formatter = (row, column, value, index) => {
  return {
    0: '作废',
    1: '未作废',
  }[value]
}

const fdocumentstatus = ref({
  0: '未审核',
  1: '审核',
})
const fforbidstatus = ref({
  0: '作废',
  1: '未作废',
})

const goBack = () => {
  router.push('/Salesmanagement/salesmanagement')
}

onMounted(() => {
  search()
  deleted(reset)
})
</script>

<style lang="css" scoped>
.table-default {
  padding: 10px 20px;
}
.backBtn {
  margin: 20px 10px;
}
.labelClassNAme {
  width: 100px;
}
.contentClassName {
  width: 170px;
}
</style>
  